<template>
    <view id="posterOnlineDetail" class="wrap_common">
        <view class="content_wrap">
            <view class="prompt_list">
                <view class="tag_label">1</view>
                <view>
                    复制我们为你精心准备的“
                    <span class="text_color">转发文案</span>”
                </view>
            </view>
			<view class="copy_text_wrap" @click="copyFN(data.copywriting)" > 点击复制：{{data.copywriting}}</view>
            <view class="poster_img" @click="touchStart(data.poster_url)">
                <img :src="data.poster_url" alt>
            </view>
            <view class="prompt_list">
                <view class="tag_label">2</view>
                <view>
                    点击海报，长按选择“
                    <span class="text_color">保存图片</span>”或“
                    <span class="text_color">发送给朋友</span>”
                </view>
            </view>
            <view class="prompt_list">
                <view class="tag_label">3</view>
                <view>转发海报的同时，粘贴“转发文案”一起发送出去</view>
            </view>
        </view>
    </view>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
import { getDetail, saveNum } from '@/api/poster'
import { getSpreadIndex } from '@/utils/common'
import { getUser } from '@/utils/auth'
export default {
	name: 'posterOnlineDetail',
	data() {
		return {
			data: '',
			loop: null
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getUser' })
	},
	onLoad(option) {
	    this.option = option
		getUser().then(res => {
			this._getDetail()
		})
	},
	methods: {
		// 进入海报详情
		_getDetail() {
		    uni.showLoading({
			    title: '生成中...'
		    })
			let url = getSpreadIndex()
			let params = {
				url: `${url}?owner_user_id=${this.option.owner_user_id}&f=poster`,
				poster_id: this.option.poster_id
			}
			getDetail(params).then(res => {
				uni.hideLoading()
				if (res.status === 'success') {
					this.data = res.data.poster_info
				} else {
					this.$toast(res.errors.message)
				}
			})
		},
		copyFN(str) {
			this.commonJS.copyText.call(this, str)
		},
		// 长按保存
		touchStart(imgurl) {
			// 预览图片
			uni.previewImage({
				urls: [imgurl],
				success: (data) => {
					let params = {
						poster_id: this.option.poster_id
					}
					saveNum(params)
				}
			})
		},
		// 切换tab
		changeTab(index, title) {}
	},
	// 微信分享
	onShareAppMessage: function(options) {
		let url = getSpreadIndex()
		const shareObj = {
			title: this.data.copywriting,
			path: `${url}?owner_user_id=${this.option.owner_user_id}`,
			imageUrl: this.data.poster_url
		}
		return shareObj
	}
}
</script>

<style lang="scss" scoped>
.wrap_common {
	background-color:whitesmoke ;
	min-height: 100vh;
    .content_wrap {
        padding: 30px;
        color: #666;
        .poster_img {
            width: 70%;
            border-radius: 20px;
            margin: 30px auto 50px;
            img {
				width: 484px;
				height: 862px;
                border-radius: 20px;
            }
        }
        .prompt_list {
            display: flex;
            align-items: center;
            margin-bottom: 22px;
            .tag_label {
                width: 34px;
                height: 34px;
                line-height: 34px;
                border-radius: 50%;
                text-align: center;
                background-color: #ffd11a;
                margin-right: 10px;
            }
        }
		.copy_text_wrap {
			line-height: 1.4;
		}
    }
    img {
        width: 100%;
    }

    .text_color {
        color: #ff6900;
    }
}
</style>
